@extends('layouts.template')

@section('title', '管理后台')

@section('content')
    <div class="contentpanel">

        <div class="row">
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-btns">
                            <a href="" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                            <a href="" class="panel-close tooltips" data-toggle="tooltip" title="Close Panel"><i class="fa fa-times"></i></a>
                        </div><!-- panel-btns -->
                        <h4 class="panel-title">Built-In Buttons</h4>
                        <p>Use any of the available button classes to quickly create a styled button.</p>
                    </div><!-- panel-heading -->
                    <div class="panel-body">
                        <div class="btn-list">
                            <button class="btn btn-default">Default</button>
                            <button class="btn btn-primary">Primary</button>
                            <button class="btn btn-success">Success</button>
                            <button class="btn btn-warning">Warning</button>
                            <button class="btn btn-danger">Danger</button>
                            <button class="btn btn-info">Info</button>
                        </div>
                    </div>
                </div><!-- panel -->
            </div><!-- col-sm-6 -->

            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-btns">
                            <a href="" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                            <a href="" class="panel-close tooltips" data-toggle="tooltip" title="Close Panel"><i class="fa fa-times"></i></a>
                        </div><!-- panel-btns -->
                        <h4 class="panel-title">Rounded Buttons</h4>
                        <p>Built-in buttons that has a super rounded corners by adding a class name <code>.btn-rounded</code></p>
                    </div><!-- panel-heading -->
                    <div class="panel-body">
                        <div class="btn-list">
                            <button class="btn btn-default btn-rounded">Default</button>
                            <button class="btn btn-primary btn-rounded">Primary</button>
                            <button class="btn btn-success btn-rounded">Success</button>
                            <button class="btn btn-warning btn-rounded">Warning</button>
                            <button class="btn btn-danger btn-rounded">Danger</button>
                        </div>
                    </div>
                </div><!-- panel -->
            </div><!-- col-sm-6 -->

            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-btns">
                            <a href="" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                            <a href="" class="panel-close tooltips" data-toggle="tooltip" title="Close Panel"><i class="fa fa-times"></i></a>
                        </div><!-- panel-btns -->
                        <h4 class="panel-title">Bordered Buttons</h4>
                        <p>Colored border buttons instead of background color by adding class name <code>.btn-bordered</code></p>
                    </div><!-- panel-heading -->
                    <div class="panel-body">
                        <div class="btn-list">
                            <button class="btn btn-default btn-bordered">Default</button>
                            <button class="btn btn-primary btn-bordered">Primary</button>
                            <button class="btn btn-success btn-bordered">Success</button>
                            <button class="btn btn-warning btn-bordered">Warning</button>
                            <button class="btn btn-danger btn-bordered">Danger</button>
                            <button class="btn btn-info btn-bordered">Info</button>
                        </div>
                    </div>
                </div><!-- panel -->
            </div><!-- col-sm-6 -->

            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-btns">
                            <a href="" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                            <a href="" class="panel-close tooltips" data-toggle="tooltip" title="Close Panel"><i class="fa fa-times"></i></a>
                        </div><!-- panel-btns -->
                        <h4 class="panel-title">Metro-Styled Buttons</h4>
                        <p>Buttons with zero radius in the corner with thin text by adding class name <code>.btn-metro</code></p>
                    </div><!-- panel-heading -->
                    <div class="panel-body">
                        <div class="btn-list">
                            <button class="btn btn-default btn-metro">Default</button>
                            <button class="btn btn-primary btn-metro">Primary</button>
                            <button class="btn btn-success btn-metro">Success</button>
                            <button class="btn btn-warning btn-metro">Warning</button>
                            <button class="btn btn-danger btn-metro">Danger</button>
                            <button class="btn btn-info btn-metro">Info</button>
                        </div>
                    </div>
                </div><!-- panel -->
            </div><!-- col-sm-6 -->

            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-btns">
                            <a href="" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                            <a href="" class="panel-close tooltips" data-toggle="tooltip" title="Close Panel"><i class="fa fa-times"></i></a>
                        </div><!-- panel-btns -->
                        <h4 class="panel-title">Button Sizes</h4>
                        <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
                    </div><!-- panel-heading -->
                    <div class="panel-body">
                        <p>
                            <button class="btn btn-default btn-lg">Large Button</button>&nbsp;
                            <button class="btn btn-primary btn-lg">Large Button</button>
                        </p>
                        <p>
                            <button class="btn btn-default">Default Button</button>&nbsp;
                            <button class="btn btn-primary">Default Button</button>
                        </p>
                        <p>
                            <button class="btn btn-default btn-sm">Small Button</button>&nbsp;
                            <button class="btn btn-primary btn-sm">Small Button</button>
                        </p>
                        <p class="nomargin">
                            <button class="btn btn-default btn-xs">Extra Small Button</button>&nbsp;
                            <button class="btn btn-primary btn-xs">Extra Small Button</button>
                        </p>
                    </div><!-- btn-body -->
                </div><!-- panel -->
            </div><!-- col-sm-6 -->

            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-btns">
                            <a href="" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                            <a href="" class="panel-close tooltips" data-toggle="tooltip" title="Close Panel"><i class="fa fa-times"></i></a>
                        </div><!-- panel-btns -->
                        <h4 class="panel-title">Button Blocks</h4>
                        <p>Create block level buttons - those that span the full width of a parent - by adding <code>.btn-block</code>.</p>
                    </div><!-- panel-heading -->
                    <div class="panel-body">
                        <p><button class="btn btn-default btn-lg btn-block">Block Level Button</button></p>
                        <p><button class="btn btn-primary btn-block">Block Level Button</button></p>
                        <p><button class="btn btn-success btn-sm btn-block">Block Level Button</button></p>
                    </div><!-- btn-body -->
                </div><!-- panel -->
            </div><!-- col-sm-6 -->

        </div><!-- row -->

        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-btns">
                    <a href="" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                    <a href="" class="panel-close tooltips" data-toggle="tooltip" title="Close Panel"><i class="fa fa-times"></i></a>
                </div><!-- panel-btns -->
                <h4 class="panel-title">Button Blocks</h4>
                <p>Create block level buttons - those that span the full width of a parent - by adding <code>.btn-block</code>.</p>
            </div><!-- panel-heading -->
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4">
                        <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">Left</button>
                            <button type="button" class="btn btn-default">Middle</button>
                            <button type="button" class="btn btn-default">Right</button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary">Left</button>
                            <button type="button" class="btn btn-primary">Middle</button>
                            <button type="button" class="btn btn-primary">Right</button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-bordered">Left</button>
                            <button type="button" class="btn btn-primary btn-bordered">Middle</button>
                            <button type="button" class="btn btn-primary btn-bordered">Right</button>
                        </div>
                    </div><!-- col-md-4 -->

                    <div class="col-md-4">
                        <p>Combine sets of <code>btn-group</code> into a <code>btn-toolbar</code> for more complex components.</p>
                        <div class="btn-toolbar">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">1</button>
                                <button type="button" class="btn btn-default">2</button>
                                <button type="button" class="btn btn-default">3</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary">Next</button>
                                <button type="button" class="btn btn-primary">Last</button>
                            </div>
                        </div><!-- btn-toolbar -->
                        <div class="btn-toolbar">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default btn-metro">1</button>
                                <button type="button" class="btn btn-default btn-metro">2</button>
                                <button type="button" class="btn btn-default btn-metro">3</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-success btn-metro">Next</button>
                                <button type="button" class="btn btn-success btn-metro">Last</button>
                            </div>
                        </div><!-- btn-toolbar -->
                    </div><!-- col-md-4 -->

                    <div class="col-md-4">
                        <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">1</button>
                            <button type="button" class="btn btn-default">2</button>

                            <div class="btn-group">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    Dropdown
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                </ul>
                            </div>
                        </div><!-- btn-group -->

                        <div class="btn-group">
                            <button type="button" class="btn btn-primary btn-bordered">1</button>
                            <button type="button" class="btn btn-primary btn-bordered">2</button>

                            <div class="btn-group">
                                <button type="button" class="btn btn-primary btn-bordered dropdown-toggle" data-toggle="dropdown">
                                    Dropdown
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                </ul>
                            </div>
                        </div><!-- btn-group -->
                    </div><!-- col-md-4 -->

                </div><!-- row -->

            </div><!-- btn-body -->
        </div><!-- panel -->

        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-btns">
                    <a href="" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                    <a href="" class="panel-close tooltips" data-toggle="tooltip" title="Close Panel"><i class="fa fa-times"></i></a>
                </div><!-- panel-btns -->
                <h4 class="panel-title">Button Dropdowns</h4>
                <p>Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.</p>
            </div><!-- panel-heading -->
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4">
                        <h5 class="md-title text-muted">Single Button Dropdowns</h5>
                        <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
                        <br />
                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                    </div><!-- col-md-4 -->
                    <div class="col-md-4">
                        <h5 class="md-title text-muted">Split Button Dropdowns</h5>
                        <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
                        <br />
                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-default">Action</button>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-primary">Action</button>
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-success">Action</button>
                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-warning">Action</button>
                            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-danger">Action</button>
                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group">
                            <button type="button" class="btn btn-white">Action</button>
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                    </div><!-- col-md-4 -->
                    <div class="col-md-4">
                        <h5 class="md-title text-muted">Dropdown Sizing</h5>
                        <p>Button dropdowns work with buttons of all sizes.</p>
                        <br />
                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-lg btn-default">Action</button>
                            <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group mr5">
                            <button type="button" class="btn btn-white">Action</button>
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-primary">Action</button>
                            <button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu pull-right" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div><!-- btn-group -->

                    </div><!-- col-md-4 -->
                </div><!-- row -->
            </div><!-- btn-body -->
        </div><!-- panel -->

    </div><!-- contentpanel -->

@endsection

